{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% comment %} {% load common_tags %} {% endcomment %}
{% load icons %}

{% block content %}
<div class="page-wrapper">
    <!-- Page header -->
    <div class="page-header d-print-none">
        <div class="container-xl">
          <div class="row g-2 align-items-center">
            <div class="col">
              <!-- Page pre-title -->
              <div class="page-pretitle">
                AppStore
              </div>
              <h2 class="page-title">
                {% trans "AppStore" %}
              </h2>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row">
                {% for appline in app_data %}
                <div class="col-12 col-md-4">
                    <div class="mb-3 card">
                        <div class="card-header">
                            <h3 class="card-title">{{ appline.name }}</h3>
                            <div class="card-actions">
                                {% include 'create_appstore_instance.html' %}
                            </div>
                        </div>
                    <div class="row row-0">
                        <div class="col-3" style="display: flex;
                        justify-content: center;
                        align-items: center;">
                        <!-- Photo -->
                        <img src="/files/{{ appline.titimg }}" class="w-10 h-10 object-cover card-img-start" width="64">
                        </div>
                        <div class="col">
                        <div class="card-body">
                            <p class="text-muted">{% trans "type" %}: {{ appline.get_type_display }}</p>
                            <p class="text-muted">{% trans "kernel" %}: {{ appline.kernel }}</p>
                            <p class="text-muted">{% trans "VCPU" %}: {{ appline.vcpu }}</p>
                            <p class="text-muted">{% trans "RAM" %}(MB): {{ appline.ram }}</p>
                            {% comment %} <p class="text-muted">SysDisk(GB): {{ appline.sysdisk }}</p> {% endcomment %}
                            <p style="display: none;">{{ appline.id }}</p>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block script %}
    {% comment %} <script src="{% static 'assets/js/filter-table.js' %}"></script> {% endcomment %}
    {% comment %} {% if request.user.is_superuser %}
        <script>
            function goto_compute(compute) {
                //let compute = $("#compute_select").val();
                window.location.href = "{% url 'appstore:appstore_create_instance' 1 %}".replace(1, compute);
            }
        </script>
    {% endif %} {% endcomment %}
{% endblock script %}